<template>
    <div id="orderDiv">
        <el-form ref="form" label-width="80px">
            <el-form-item label="订单id">
                <el-input
                    v-model="orderId"
                    placeholder="请输入订单id"
                ></el-input>
            </el-form-item>
            <el-form-item label="退款原因">
                <el-input
                    v-model="orderId"
                    placeholder="请输入原因"
                ></el-input>
            </el-form-item>
            <el-form-item label="支付方式">
                <el-radio-group v-model="payPlatform" @change="changeType">
                    <el-radio label="1">微信</el-radio>
                    <el-radio label="2">支付宝</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button @click="toPayment" type="primary">去支付</el-button>
            </el-form-item>
            <el-form-item>
                <el-button @click="toRefund" type="primary">去退款</el-button>
            </el-form-item>
        </el-form>
        <!-- <el-button @click="toPayment" type="primary">去支付</el-button> -->
        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            width="252px"
            center
        >
            <!--二维码生成-->
            <!-- <vueQr :text="qr" :size="200" :margin="10" :correctLevel="0" :whiteMargin="false" :logoSrc="this.$store.state.logoUrl"></vueQr> -->
            <vueQr
                :text="qr"
                :size="200"
                :margin="10"
                :correctLevel="0"
                :whiteMargin="false"
            ></vueQr>
            <span id="dialogSpan" v-show="paySucc == true"></span>
            <span id="dialogSpan2" v-show="paySucc == true">
                <i
                    class="el-icon-success"
                    style="
                        background-color: #ffffff;
                        color: #67c23a;
                        font-size: 60px;
                        border-radius: 30px;
                    "
                />
                <br />
                支付成功
            </span>
        </el-dialog>
    </div>
</template>
  
  <script>
import vueQr from "vue-qr";
import axios from "axios";
import { prePay, payStatus,refund} from "@/api/pay";
export default {
    components: {
        vueQr,
    },
    data() {
        return {
            dialogVisible: false,
            qr: "",
            paySucc: false,
            title: "微信支付",
            orderId: 100,
            payPlatform: "1", // 微信,
            times: 1,
            refundReason:"",// 退款原因
            outRefundNo:'',// 退款订单号
        };
    },
    methods: {
        changeType:function(val){
          val == 1 ? this.title='微信支付' : this.title='支付宝支付';
        },
        checkPay(){
            // setInterval() 定时执行
            // setTimeout() 仅执行一次
            setTimeout(() => {
                    // 发送查询支付请求
                    payStatus({outTradeNo: this.orderId,
                        payPlatform:this.payPlatform,
                        count:this.times}).then(res => {
                        if(res.code == 200) {
                            // 返回2表示达到最大次数，返回1表示支付成功
                            if(res.data == 2 || res.data == 1){
                                console.log(res.data);
                                this.dialogVisible = false;
                                this.times == 0;
                            // 返回3表示需要继续轮询
                            }else if(res.data == 3){
                                console.log(res.data);
                                this.times++;
                                this.checkPay();
                            }
                        }
                    })
                }, 5000);
        },

        toPayment() {
            let _this = this;
            // 这里填写后台支付的地址
            prePay({
                outTradeNo: this.orderId,
                payPlatform: this.payPlatform,
            }).then((res) => {
                console.log(res.data);
                this.qr = res.data;
                console.log(this.qr);

                // 调用轮询
                this.checkPay();

                if ("WebSocket" in window) {
                    // 打开一个 web socket
                    // 通道地址按照项目进行配置
                    var ws = new WebSocket(
                        "ws://localhost:8080//bindingRecord"
                    );
                    ws.onopen = function () {
                        // Web Socket 已连接上，使用 send() 方法发送数据
                        // ws.send("data");
                        // alert("数据发送中...");
                    };
                    ws.onmessage = function (evt) {
                        var received_msg = evt.data;
                        // 接收后台推送的数据
                        // alert("数据已接收..." + evt.data);
                        if (Boolean(evt.data)) {
                            _this.paySucc = true;
                            setTimeout(() => {
                                _this.dialogVisible = false;
                            }, 3 * 1000);
                        }
                        ws.close();
                    };
                    ws.onclose = function () {};
                } else {
                    // 浏览器不支持 WebSocket
                    alert("您的浏览器不支持 WebSocket!");
                }
            });
            this.dialogVisible = true;
        },
        toRefund(){
            let _this = this;
            // 这里填写后台支付的地址
            refund({
                outRefundNo: this.orderId,
                payPlatform: this.payPlatform,
                refundReason:this.refundReason,
            }).then(res=>{
                console.log(res.data);
                this.qr = res.data
            })

        },
        
    },
};
</script>

  <style scoped>
/* #dialogSpan {
    display: inline-block;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 80px;
    right: 27px;
    opacity: 0.9;
    background-color: #ffffff;
}
#dialogSpan2 {
    display: inline-block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 124px;
    right: 80px;
    font-size: 20px;
    text-align: center;
} */
</style>
  
  